<template>
  <div class="alarm-info" :style="{ '--theme': $store.getters.themeColor }">
    <custom-title v-if="!hiddenTitle" name="事件信息" />
    <div class="content" :class="{ 'single-column': isSingleColumn }">
      <div v-if="showUserInfo || isLocation" class="content">
        <alarm-row label="客户ID：" :value="orderData.tenantId" />
        <alarm-row label="客户名称：" :value="orderData.tenantName" />
        <template v-if="!isLocation">
          <alarm-row label="行业应用：" :value="orderData.industryName" />
          <alarm-row label="应用版本：" :value="orderData.appVerCode" />
        </template>
      </div>
      <template v-if="isCustOperate">
        <alarm-row label="客户ID：" :value="orderData.tenantId" />
        <alarm-row label="客户名称：" :value="orderData.tenantName" />
        <alarm-row label="节点编号：" :value="orderData.alarmNode" />
        <alarm-row label="节点名称：" :value="orderData.operationNodeName" />
      </template>
      <template v-if="isLocation">
        <alarm-row label="节点ID：" :value="orderData.accessNode" />
        <alarm-row label="节点名称：" :value="orderData.platformName" />
        <alarm-row label="行业应用：" :value="orderData.industryName" />
        <alarm-row label="应用版本：" :value="orderData.appVerCode" />
      </template>
      <alarm-row label="事件标题：" :value="orderData.alarmBody" isSingle />
      <alarm-row label="事件编号：" :value="orderData.warningOrderId" />
      <alarm-row label="重要等级：" :value="orderData.importanceLevelName" />
      <alarm-row label="告警时间：" :value="orderData.alarmTime" />
      <alarm-row label="告警来源：" :value="orderData.warningSourceName" />

      <alarm-row
        label="告警类型："
        :value="orderData.warningTypeName"
      ></alarm-row>
      <alarm-row
        label="算法编码："
        :value="orderData.algorithmCode"
        v-if="isLocationCustOperate"
      />
      <alarm-row
        label="告警原因："
        :value="orderData.alarmReason"
        v-if="!isLocationCustOperate"
      >
        <el-select
          v-if="isShowAlarmReason"
          v-model="alarmReason"
          class="alarm-reason"
          clearable
          filterable
          @change="setAlarmReason"
        >
          <el-option
            v-for="item in alarmReasonList"
            :key="item.id"
            :label="item.reason"
            :value="item.reason"
          />
        </el-select>
      </alarm-row>
      <alarm-row label="事发地点：" :value="orderData.address" isSingle>
        <div v-if="!showAddressWord" style="display: flex; margin: 6px 0px">
          <el-input
            v-model="orderData.address"
            :title="orderData.address"
            style="flex: 1"
            class="selectClass address-input"
          />
          <el-button
            v-hasPermi="['recy:map']"
            type="primary"
            class="mapBtn map-btn-style"
            @click="mapClick(orderData.longitude, orderData.latitude)"
          >
            地图
          </el-button>
        </div>
      </alarm-row>
      <alarm-row label="经纬度：" :value="lngLat" />
      <template v-if="showCameraSource && orderData.alarmLocation === '1'">
        <alarm-row
          v-if="orderData.horiAzimuthAngle"
          label="事发地点到摄像机距离："
          :value="
            orderData.incidentDistance ? orderData.incidentDistance + 'm' : ''
          "
        />
        <div class="content">
          <alarm-row
            v-if="addAngleStr(orderData.devicePitch)"
            :value="addAngleStr(orderData.devicePitch)"
          >
            <template slot="label">
              <span>摄像机俯仰角</span>
              <el-tooltip
                effect="dark"
                placement="top"
                content="水平向下为负，根据摄像机PTZ计算，修改事发地点经纬度后重新计算。"
              >
                <i class="iconfont icon-tongyong-tianqiwenhao" />
              </el-tooltip>
              <span>：</span>
            </template>
          </alarm-row>
          <alarm-row
            v-if="addAngleStr(orderData.deviceHorizontal)"
            :value="addAngleStr(orderData.deviceHorizontal)"
          >
            <template slot="label">
              <span>摄像机水平角</span>
              <el-tooltip
                effect="dark"
                placement="top"
                content="根据摄像机PTZ计算，修改事发地点经纬度后重新计算。"
              >
                <i class="iconfont icon-tongyong-tianqiwenhao" />
              </el-tooltip>
              <span>：</span>
            </template>
          </alarm-row>
        </div>
      </template>
      <div class="content">
        <alarm-row label="所属网格：" :value="orderData.gridName" />
        <alarm-row label="所属网格员：" :value="orderData.keeperName" />
      </div>
      <alarm-row
        v-if="page === '11'"
        label="告警压制原因："
        :value="orderData.interceptName"
      />
      <template v-if="orderData.warningSource === '1'">
        <div
          v-for="(item, i) in orderData.polygonOperate"
          class="content"
          :key="i"
        >
          <alarm-row
            v-if="item.polygonName"
            label="电子围栏："
            :value="item.polygonName"
          />
          <alarm-row
            v-if="item.layerName"
            label="图层名称："
            :value="item.layerName"
          />
          <alarm-row
            v-if="item.featureId"
            label="图斑编码："
            :value="item.tbbh"
            is-single
          />
        </div>
      </template>

      <alarm-row
        label="事件描述："
        class="eventDescription"
        isSingle
        alignItems="baseline"
      >
        <!--    雷达告警扩展字段列表      -->
        <div v-if="orderData.warningSource === '10'" class="content">
          <alarm-row
            v-if="extra.targetId"
            label="目标ID："
            :value="extra.targetId"
          />
          <alarm-row
            v-if="extra.targetType"
            label="目标类型："
            :value="extra.targetType"
          />
          <alarm-row v-if="extra.MMSI" label="目标MMSI：" :value="extra.MMSI" />
          <alarm-row
            v-if="extra.targetName"
            label="目标名称："
            :value="extra.targetName"
          />
          <alarm-row
            v-if="extra.speed + ''"
            label="目标速度："
            :value="extra.speed"
          />
          <alarm-row
            v-if="extra.course"
            label="目标航向："
            :value="extra.course"
          />
          <alarm-row
            v-if="extra.targetLength"
            label="目标长度："
            :value="extra.targetLength"
          />
        </div>
        <!--    AI告警，摄像机告警扩展字段列表      -->
        <template v-if="orderData.warningSource === '1'">
          <div class="content">
            <!-- 卡口告警 1819000 -->
            <div
              class="top-wrapper"
              v-if="
                Object.keys(extra)?.length ||
                (orderData.description &&
                  algorithmConfig?.length &&
                  algorithmConfig.find(
                    (item) =>
                      item?.analysisPeriod ||
                      item?.timeInterval ||
                      item?.modelConfig?.length
                  ))
              "
            >
              <el-scrollbar class="scrollbar is-single-column">
                <p v-if="Object.keys(extra)?.length" style="margin-bottom: 0">
                  算法识别结果
                </p>
                <template v-if="extra.carType">
                  <alarm-row
                    v-for="(item, index) in extra.carType"
                    label="车辆分类："
                    :value="item"
                    :key="'carType' + index"
                  />
                </template>
                <template v-if="extra.carNumber">
                  <alarm-row
                    v-for="(item, index) in extra.carNumber"
                    label="车牌号码："
                    :value="item"
                    :key="'carNumber' + index"
                  />
                </template>
                <template v-if="extra.plateColor">
                  <alarm-row
                    v-for="(item, index) in extra.plateColor"
                    label="车牌颜色："
                    :value="item"
                    :key="'plateColor' + index"
                  />
                </template>
                <template v-if="extra.objectId">
                  <alarm-row
                    v-for="(item, index) in extra.objectId"
                    label="监测目标ID："
                    :value="item"
                    :key="'objectId' + index"
                  />
                </template>
                <template v-if="extra.objectCount">
                  <alarm-row
                    v-for="(item, index) in extra.objectCount"
                    label="监测目标数量："
                    :value="item"
                    :key="'objectCount' + index"
                  />
                </template>
                <template v-if="extra.objectTime">
                  <alarm-row
                    v-for="(item, index) in extra.objectTime"
                    label="目标停留时长（秒）："
                    :value="item"
                    :key="'objectTime' + index"
                  />
                </template>
                <template v-if="extra.alarmCause">
                  <alarm-row
                    v-for="(item, index) in extra.alarmCause"
                    label="告警原因："
                    :value="item"
                    :key="'alarmCause' + index"
                  />
                </template>
                <template v-if="extra.objectName">
                  <alarm-row
                    v-for="(item, index) in extra.objectName"
                    label="监测目标名称："
                    :value="item"
                    :key="'objectName' + index"
                  />
                </template>
                <template v-if="orderData.warningTypeId == '1819000'">
                  <template v-if="extra.vehicleNumber">
                    <alarm-row
                      v-for="(item, index) in extra.vehicleNumber"
                      label="车牌号："
                      :value="item"
                      :key="index"
                    />
                  </template>
                  <template v-if="extra.vehicleType">
                    <alarm-row
                      v-for="(item, index) in extra.vehicleType"
                      label="车辆类型："
                      :value="item"
                      :key="index"
                    />
                  </template>
                  <template v-if="extra.vehicleNumColor">
                    <alarm-row
                      v-for="(item, index) in extra.vehicleNumColor"
                      label="车牌颜色："
                      :value="item"
                      :key="index"
                    />
                  </template>
                  <template v-if="extra.vehicleColor">
                    <alarm-row
                      v-for="(item, index) in extra.vehicleColor"
                      label="车辆颜色："
                      :value="item"
                      :key="index"
                    />
                  </template>
                </template>
                <p
                  v-if="
                    orderData.description &&
                    algorithmConfig?.length &&
                    algorithmConfig.find(
                      (item) =>
                        item?.analysisPeriod ||
                        item?.timeInterval ||
                        item?.modelConfig?.length
                    )
                  "
                >
                  算法配置参数
                </p>
                <span
                  v-for="(algorithmConfig, index) in algorithmConfig"
                  :key="index"
                >
                  <span
                    :key="index + 'i'"
                    class="inline-style"
                    v-if="algorithmConfig?.analysisPeriod?.length"
                    >算法运行时段：{{
                      algorithmConfig.analysisPeriod?.join("，")
                    }}</span
                  >
                  <span
                    :key="index + 'j'"
                    class="inline-style"
                    v-if="algorithmConfig?.timeInterval"
                    >识别频率：{{ algorithmConfig.timeInterval }}</span
                  >
                  <span
                    v-for="(configItem, i) in algorithmConfig.modelConfig"
                    :key="i"
                  >
                    <span
                      class="inline-style"
                      v-if="configItem?.selectValue || configItem?.value"
                      >{{ configItem.name }}：{{
                        configItem.selectValue || configItem.value
                      }}</span
                    >
                  </span>
                </span>
              </el-scrollbar>
            </div>
          </div>
        </template>
        <template v-if="orderData.warningSource === '4'">
          <div class="content">
            <template v-if="extra.carType">
              <alarm-row
                v-for="(item, index) in extra.carType"
                v-show="item"
                label="车辆分类："
                :value="item"
                :key="index + 'carType'"
              />
            </template>
            <template v-if="extra.carNumber">
              <alarm-row
                v-for="(item, index) in extra.carNumber"
                v-show="item"
                label="车牌号码："
                :value="item"
                :key="index + 'carNumber'"
              />
            </template>
            <template v-if="extra.plateColor">
              <alarm-row
                v-for="(item, index) in extra.plateColor"
                label="车牌颜色："
                :value="item"
                :key="index + 'plateColor'"
              />
            </template>
            <template v-if="extra.objectId">
              <alarm-row
                v-for="(item, index) in extra.objectId"
                label="监测目标ID："
                :value="item"
                :key="index + 'objectId'"
              />
            </template>
            <template v-if="extra.objectCount">
              <alarm-row
                v-for="(item, index) in extra.objectCount"
                label="监测目标数量："
                :value="item"
                :key="index + 'objectCount'"
              />
            </template>
            <template v-if="extra.objectTime">
              <alarm-row
                v-for="(item, index) in extra.objectTime"
                label="目标停留时长（秒）："
                :value="item"
                :key="index + 'objectTime'"
              />
            </template>
            <template v-if="extra.alarmCause">
              <alarm-row
                v-for="(item, index) in extra.alarmCause"
                label="告警原因："
                :value="item"
                :key="index + 'alarmCause'"
              />
            </template>
            <template v-if="extra.objectName">
              <alarm-row
                v-for="(item, index) in extra.objectName"
                label="监测目标名称："
                :value="item"
                :key="'objectName' + index"
              />
            </template>
            <template v-if="orderData.warningTypeId == '1819000'">
              <template v-if="extra.vehicleNumber">
                <alarm-row
                  v-for="(item, index) in extra.vehicleNumber"
                  label="车牌号："
                  :value="item"
                  :key="'vehicleNumber' + index"
                />
              </template>
              <template v-if="extra.vehicleType">
                <alarm-row
                  v-for="(item, index) in extra.vehicleType"
                  label="车辆类型："
                  :value="item"
                  :key="'vehicleType' + index"
                />
              </template>
              <template v-if="extra.vehicleNumColor">
                <alarm-row
                  v-for="(item, index) in extra.vehicleNumColor"
                  label="车牌颜色："
                  :value="item"
                  :key="'vehicleNumColor' + index"
                />
              </template>
              <template v-if="extra.vehicleColor">
                <alarm-row
                  v-for="(item, index) in extra.vehicleColor"
                  label="车辆颜色："
                  :value="item"
                  :key="'vehicleColor' + index"
                />
              </template>
            </template>
          </div>
        </template>
        <!--    当为物联告警时，显示列表数据      -->
        <template v-if="orderData.warningSource === '8'">
          <div v-for="(item, i) in extra.monitors" :key="i" class="content">
            <template v-if="item.newMonitors">
              <alarm-row
                v-for="(monitor, i) in item.newMonitors"
                :key="i"
                :label="`${monitor.itemName}：`"
                :value="monitor.itemCode"
              />
            </template>
            <template v-else>
              <alarm-row label="监测指标编码：" :value="extra.monitorCode" />
              <alarm-row label="监测指标：" :value="extra.monitorName" />
              <alarm-row label="监测值：" :value="extra.monitorValue" />
              <alarm-row label="告警阈值：" :value="extra.thresholdValue" />
            </template>
          </div>
        </template>
        <!-- 雷达告警事件描述 -->
        <template
          v-if="
            orderData.warningSource === '9' &&
            orderData.description &&
            JSON.parse(orderData.description)?.length
          "
        >
          <alarm-row
            v-for="(desItem, index) in JSON.parse(orderData.description)"
            :key="index"
            :label="`${desItem.name}：`"
            :value="desItem.value || '-'"
          />
        </template>
        <template v-if="orderData.warningSource !== '8'">
          <template
            v-if="
              orderData.description &&
              !['9', '1', '4'].includes(orderData.warningSource)
            "
          >
            <div class="text-style" :title="orderData.description">
              {{ orderData.description }}
            </div>
          </template>
          <template v-if="orderData.voice">
            <audio
              id="audioid"
              ref="audio"
              style="height: 0px; width: 0px"
              :src="orderData.voice"
              controls="controls"
              @timeupdate="onTimeupdate"
              @ended="isPlay = false"
            />
            <div style="display: flex; align-items: center; height: 30px">
              <span
                v-show="!muted"
                class="iconfont icon-a-193yinlianglabashengyin-xianxing1"
                @click="audioMuted"
              ></span>
              <span
                v-show="muted"
                class="iconfont icon-tongyong_icon_shipindibugongneng_jingyin"
                @click="audioMuted"
              ></span>
              <el-slider
                v-model="sliderTime"
                :show-tooltip="false"
                class="slider"
                style="height: 30px"
                @change="changeCurrentTime"
              />
              <span
                v-show="isPlay"
                class="iconfont icon-caozuo-bofang-zanting"
                @click="audioPause"
              ></span>
              <span
                v-show="!isPlay"
                class="iconfont icon-liebiao-bofang"
                @click="audioPlay"
              ></span>
              <div />
            </div>
          </template>
        </template>
      </alarm-row>

      <alarm-row label="备注：" :value="orderData.remark" isSingle />
    </div>
    <!--地图-->
    <eventJudgeMapol
      :isMapList="isMapList"
      :orderData="orderData"
      @isMapCancelFun="isMapCancelFun"
    />
  </div>
</template>
<script>
import CustomTitle from "../Title.vue";
import eventJudgeMapol from "@/views/pages/eventManagement/eventJudgeMapol.vue";
import { getTwoPointAngle } from "@/utils/countAngleDistance";
import { getAlarmReasonList } from "@/api/modules/eventManagement/eventManagement.js";
import AlarmRow from "./AlarmRow.vue";
export default {
  name: "AlarmInfo",
  components: {
    CustomTitle,
    eventJudgeMapol,
    AlarmRow,
  },
  props: {
    orderData: {
      type: Object,
      default: () => ({}),
    },
    position: {
      type: Array,
      default: () => [],
    },
    positionMonitor: {
      type: Array,
      default: () => [],
    },
    warningTypeList: {
      type: Array,
      default: () => [],
    },
    isRecycleBin: {
      type: Boolean,
      default: false,
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
    hasTimeLine: {
      type: Boolean,
      default: false,
    },
    hiddenTitle: {
      type: Boolean,
      default: false,
    },
    showAddressWord: {
      type: Boolean,
      default: false,
    },
    isSingleColumn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      leftLabelSpan: 6,
      rightLabelSpan: 9,
      isMapList: {
        longitude: "0", // 经度
        latitude: "0", // 纬度
        isMap: false,
      },
      isPlay: false,
      audioLength_original: 0,
      audioLength: 0,
      audioInterval: null,
      sliderTime: 0,
      muted: false,
      showUserInfo: false,
      page: "",
      alarmReasonList: [],
      alarmReason: "",
      // plateColor:[],
      // carType:[]
      // 耕地卫片执法: 4110101, 矿产卫片执法: 4110102 非农化卫片执法: 4110103 非粮化卫片执法: 4110104
      weipianList: ["4110101", "4110102", "4110103", "4110104"],
    };
  },
  computed: {
    // 转换lng,lat
    lngLat() {
      let [lng, lat] = this.position;
      if (lng && lat) {
        lng = parseFloat(lng).toFixed(6);
        lat = parseFloat(lat).toFixed(6);
        return `${lng}，${lat}`;
      }
    },
    // 摄像机根据来源显示判断
    showCameraSource() {
      return ["1", "4", "11"].includes(this.orderData.warningSource);
    },
    // 事件描述数据处理
    extra() {
      const { extraField, warningSource } = this.orderData;
      let result = {};
      if (extraField) {
        try {
          const res = JSON.parse(extraField);
          if (!res) return result;
          if (warningSource === "1" || warningSource === "4") {
            if (Array.isArray(res)) {
              res.map((item) =>
                item.attrList?.forEach((node) => {
                  if (!result[node.attrType]) {
                    result[node.attrType] = [];
                  }
                  result[node.attrType].push(node.attrValue);
                })
              );
            }
          } else {
            result = res;
          }
        } catch (e) {
          console.error(e);
        }
      }
      return result;
    },
    // 事件描述算法配置参数
    algorithmConfig() {
      let { description } = this.orderData;
      const unitMap = {
        1: "小时",
        2: "分钟",
        3: "秒",
      };
      try {
        if (description) {
          description = JSON.parse(description);
          description.forEach((item) => {
            if (item.analysisPeriod) {
              let analysisPeriod = item.analysisPeriod;
              item.analysisPeriod = analysisPeriod.map((time) => {
                return time.startTime + "-" + time.endTime;
              });
            }
            if (item.timeInterval) {
              item.timeInterval =
                item.timeInterval + unitMap[item.timeIntervalUnit];
            }
          });
        }
      } catch (e) {
        return [];
      }
      return description;
    },
    // 是否是属地告警
    isLocation() {
      return (
        location.href.includes("eventQueryDetail") ||
        location.href.includes("eventLocalDetail")
      );
    },
    isCustOperate() {
      return location.href.includes("custOperateDetail");
    },
    isLocationCustOperate() {
      return (
        location.href.includes("pageType=custOperate") ||
        location.href.includes("custOperateDetail")
      );
    },
    isShowAlarmReason() {
      if (this.isDetail) return false;
      if (this.orderData.deleteFlag === 1 || this.orderData.deleteFlag === 2)
        return false;
      if (this.hasTimeLine) {
        return false;
      }
      if (this.isDisabled()) {
        return false;
      }
      return true;
    },
    addAngleStr() {
      return (str) => {
        if (str !== null && str !== undefined) {
          // 保留两位小数
          str = Number(str).toFixed(2);
          return str + "°";
        } else {
          return "";
        }
      };
    },
    returnLy() {
      const { description, voice } = this.orderData;
      if (description && voice) {
        return 1; // 显示文字和录音
      } else if (voice) {
        return 2; // 显示文字，不显示录音
      } else if (description) {
        return 3; // 不显示文字，显示录音
      }
    },
  },
  watch: {
    "orderData.warningTypeId": {
      handler(val) {
        this.orderData.warningTypeId = val;
        this.$emit("update:orderData", this.orderData);
        this.page = this.$route.query.page;
        const userType = this.$store.getters.userInfo.userType;
        if ((this.page === "12" || this.page === "13") && userType === "0") {
          this.showUserInfo = true;
        }
      },
    },
    "orderData.warningOrderId": {
      handler() {
        if (!this.isDisabled()) {
          this.getAlarmReason();
        }
        this.alarmReason = this.orderData.alarmReason;
        this.page = this.$route.query.page;
      },
      immediate: true,
    },
    orderData(val) {
      this.getAudioTime();
    },
  },
  created() {
    // this.getDicts("plateColor").then(response => {
    //   this.plateColor = response.data;
    // });
    // this.getDicts("carType").then(response=>{
    //   this.carType = response.data;
    // })
  },
  methods: {
    // 点击地图
    mapClick(longitude, latitude) {
      this.isMapList.longitude = longitude;
      this.isMapList.latitude = latitude;
      this.isMapList.isMap = true;
    },
    isMapCancelFun(data, distanceFun) {
      this.isMapList.isMap = false;
      if (distanceFun) {
        const angle = getTwoPointAngle(
          this.positionMonitor,
          [data.longitude, data.latitude],
          distanceFun
        );
        this.$emit("update:horiAzimuthAngle", Number(angle));
        data.distanceFun = distanceFun;
      }
      this.$emit("mapCancel", data);
    },

    autoPlay() {
      const myAuto = document.getElementById("audioid");
      myAuto.play();
      const _this = this;
      _this.audioInterval = setInterval(() => {
        if (_this.audioLength == 0) {
          _this.audioLength = _this.audioLength_original;
          _this.isPlay = false;
          clearInterval(_this.audioInterval);
          return;
        }
        _this.audioLength--;
      }, 1000);
      this.isPlay = true;
    },
    autoPause() {
      const myAuto = document.getElementById("audioid");
      myAuto.pause();
      const _this = this;
      clearInterval(_this.audioInterval);
      this.isPlay = false;
    },
    audioTimeStr() {
      const minute = this.audioLength / 60;
      let minutes = parseInt(minute);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      // 秒
      const second = this.audioLength % 60;
      let seconds = Math.round(second);
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + "：" + seconds;
    },
    getAudioTime() {
      const myAuto = document.getElementById("audioid");
      const _this = this;
      if (myAuto) {
        myAuto.load();
        myAuto.oncanplay = function () {
          // console.log("音乐时长", myAuto.duration);//音乐总时长
          // 处理时长
          const time = myAuto.duration;
          // 分钟
          const minute = time / 60;
          let minutes = parseInt(minute);
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          // 秒
          const second = time % 60;
          let seconds = Math.round(second);
          if (seconds < 10) {
            seconds = "0" + seconds;
          }
          _this.audioLength = parseInt(minutes) * 60 + Math.round(seconds);
          _this.audioLength_original = _this.audioLength;
          // console.log('处理音乐时长', minutes + "：" + seconds);
        };
      } else {
        setTimeout(() => {
          this.getAudioTime();
        }, 500);
      }
    },
    audioPlay() {
      this.$refs.audio.play();
      this.isPlay = true;
    },
    audioPause() {
      this.$refs.audio.pause();
      this.isPlay = false;
    },
    changeCurrentTime(index) {
      this.$refs.audio.currentTime = parseInt((index / 100) * this.audioLength);
    },
    onTimeupdate(res) {
      this.sliderTime = parseInt(
        (res.target.currentTime / this.audioLength) * 100
      );
    },
    audioMuted() {
      this.$refs.audio.muted = !this.$refs.audio.muted;
      this.muted = this.$refs.audio.muted;
    },
    /**
     * 保留一位小数
     * @param value 将要变更的小数
     * @return {number|string} 保留后的小数
     */
    returnFloat1(value) {
      if (!value) return "";
      value = Math.round(parseFloat(value) * 10) / 10;
      if (value.toString().indexOf(".") < 0) {
        value = value.toString() + ".0";
      }
      return value;
    },
    getAlarmReason() {
      const params = {
        typeValue: this.orderData.warningTypeId,
      };
      if (this.$store.getters.userInfo.userType === "0") {
        params.tenantId = this.$store.getters.userInfo.tenantId;
        params.industryCode = this.$store.getters.userInfo.industryCode;
      }
      getAlarmReasonList(params).then((res) => {
        if (res.code === 200) {
          this.alarmReasonList = res.data;
        }
      });
    },
    setAlarmReason() {
      this.$set(this.orderData, "alarmReason", this.alarmReason);
    },
    isDisabled() {
      const source = this.$store.getters.userInfo.userType;
      return source === "0";
    },
  },
  mounted() {
    if (!this.isDisabled()) {
      this.getAlarmReason();
    }
    this.alarmReason = this.orderData?.alarmReason;
  },
};
</script>
<style lang="scss" scoped>
$theme: var(--theme);
.alarm-info {
  .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .single-column {
    /deep/ .row {
      width: 100%;
    }
    /deep/ audio {
      display: block;
    }
  }
}

.rowTitle {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #909399;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &.left {
    // max-width: 85px;
    max-width: 151px;
  }

  &.right {
    // max-width: 110px;
    max-width: 151px;
  }
}
.remark {
  min-width: 57px;
}
.row-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 32px;
  text-align: right;
  white-space: nowrap;
}
.rowValue {
  line-height: 32px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  .el-input,
  .el-select {
    margin: 6px auto;
  }
}
.row-value {
  font-size: 14px;
  color: #333333;
  white-space: nowrap;
  line-height: 32px;
}

.desc .rowTitle {
  color: #606266;
}
.mapBtn {
  height: 32px;
  margin-left: 10px;
}

.audioStyle {
  width: 120px;
  height: 30px;
  background: #f2f5f8;
  border-radius: 20px;
  border: 1px solid #cddbe6;
  line-height: 30px;
  //margin-left: 5px;
}
.iot-event-describe-wrapper {
  display: flex;
  align-items: center;
  font-size: 12px;
  .iot-event-describe-title {
    min-width: 100px;
    text-align: right;
  }
}
.no-wrap {
  display: flex;
  flex-wrap: nowrap;
}
.slider {
  display: inline-block;
  margin-right: 6px;
  position: relative;
  margin-left: 10px;
  width: 120px;
  height: 30px;
  line-height: 30px;
}
/deep/.el-slider__runway {
  margin: 13px 0;
  height: 4px;
  background-color: #dcdfe6;
}
/deep/.el-slider__button {
  height: 12px;
  width: 12px;
  border: 2px solid $theme;
}
/deep/.el-slider__button-wrapper {
  height: 33px;
  width: 17px;
}
/deep/.el-slider__bar {
  height: 4px;
  background-color: $theme;
}
.flex {
  display: flex;
  align-items: center;
}
.map-btn-style {
  padding: 0 15px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/.address-input input {
  padding-left: 5px;
}
.questionMarkPrompts {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #ffa940;
  border-radius: 7px;
  line-height: 14px;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
#otherMaxWidth130 {
  max-width: 151px;
}
.pr16 {
  padding-right: 16px;
}
/deep/.alarm-reason.el-select--mini {
  .el-select__caret {
    height: 28px;
  }
}
.eventDescription {
  /deep/.value {
    white-space: normal;
    line-height: 20px;
  }
}
.text-style {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC, Microsoft YaHei, sans-serif;
  font-weight: 400;
  color: #606266;
  line-height: 20px;
}
.top-wrapper {
  background: #f5f7fa;
  border-radius: 4px;
  padding: 9px 0 6px 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  p {
    width: 100%;
    line-height: 24px;
    margin-bottom: -4px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #303133;
  }
  .is-single-column {
    .inline-style {
      width: 100%;
    }
  }
  .inline-style {
    white-space: normal;
    line-height: 20px;
    margin-top: 12px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #606266;
    display: block;
  }
  .scrollbar {
    max-height: 428px;
    padding: 0 12px;
    ::v-deep .el-scrollbar__wrap {
      padding-bottom: 0;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      overflow-x: hidden;
    }
    ::v-deep .el-scrollbar__view {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>
